*{
    padding: 0;
    margin: 0;
}




.clearfix::before,.clearfix::after{
    content: '';
    display: table;
    clear: both;
}
nav{
    
    z-index: 1;
    width: 100%;
    height: 3.62rem;
    position: sticky;
    top: 0rem;
    .nav-1{
        height: 1.5rem;
        background:url(../img/APP图片/nav-1.png);
        background-size: 100%;

    }
    .nav-2{
        height: 1.26rem;
        background-color: #f2f2f2;
        display: grid;
        grid-template-columns:52.09px 7.81rem 1.5rem;
        grid-template-rows: 100%;
        justify-content: center;
        .nav-2-1{
            display: flex;
            align-items: center;
            justify-content: center;
            img{
                width: .72rem;
                height: .47rem;
                

            }
            .bs-1{
                height: .9rem;
                width: 100%;
                display: flex;
                background-color: #ffffff;
                img{
                    width: .9rem;
                    height: .9rem;
                }
                form{
                    input{
                        width: 6.91rem;
                        height: .88rem;
                        vertical-align: top;
                        border: none;
                        
                    }
                }
            }
           
        }
    }
    .nav-3{
        
        width: 92%;
        padding-left: 8%;
        height: .86rem;
        background-color: #f2f2f2;
        display: flex;
        justify-content: space-around;
        
       
        .nav-3-1{
            &:nth-child(1){
                color: #ee6d1c;
            }
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            height: .86rem;
            
            span{
                font-size: .39rem;
            }
            &::after{
                position: absolute;
                content: '';
                width: 0rem;
                height: 1px;
                top: .84rem;
                background-color: #ee6d1c;
                transition: all 1s;
            }
            &:hover::after{
                width: .78rem;
            }
        }
        .nav-3-2{
            display: flex;
            justify-content: end;
            align-items: center;
           width: 20%;
           height: .86rem;
           position: relative;
           
            img{
                transform: rotateZ(-90deg);
                width: .6rem;
                height: .6rem;
                &:hover +.nav-3-2-1{
                    display: block;
                }
            }
            .nav-3-2-1{
                
                display: none;
                width: 10.20rem;
                height: 3.74rem;
                padding: 0 .37rem;
                position: absolute;
                background-color: #f2f2f2;
                top: 0;
                left: -8.64rem;
                h2{
                    margin-top: .37rem;
                    font-size: .42rem;
                    
                }
                img{
                    position: absolute;
                    transform: rotateZ(90deg);
                    width: .6rem;
                    height: .6rem;
                    top: 10px;
                    left: 350px;
                }
                .nav-3-2-1-1{
                    margin-top: .37rem;
                    width: 10.05rem;
                    height: 2.39rem;
                    display: grid;
                    grid-template-columns: repeat(4,2.28rem);
                    grid-template-rows: .86rem .86rem;
                    gap: .23rem;
                    
                    .nav-3-2-1-11{
                        &:nth-child(1){
                            background-color: #ee6d1c;
                            color:white;
                        }
                        
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        background-color: white;
                        border-radius: .14rem;
                        span{
                            font-size: .37rem;

                        }
                        width: 2.28rem;
                        height: .86rem;
                    }
                }

            }

        }




    }





}



// 轮播图
.lbt{
    width: 100%;
    height: 5.4rem;
    position: relative;
    overflow: hidden;
    .lbt-0{
        position: absolute;
        width: 300%;
        height: 5.4rem;
        display: flex;
        animation: move-1 5s steps(2,start) infinite;
        img{
            width: 33.333333%;
            height: 100%;
        }
    }
    .dian-1{
        position: absolute;
        overflow: hidden;
        width: 1.44rem;
        height:.37rem;
        top: 4.61rem;
        left: 43%;
        
        .dian-1-1{
            display: flex;
            position: absolute;
            width: 2.88rem;
            height: .37rem;
            justify-content: space-evenly;
            align-items: center;
            animation: move-1 5s steps(2,start) infinite;
            span{
                font-size: .35rem;
                &:nth-child(4){
                    color: #ffffff;
                }
            }

        }
    }





}
@keyframes   move-1{
    0%{
        transform: translateX(0%);
    }
    50%{
        transform:translateX(-33.33%);
    }
    100%{
        transform: translateX(-66.66%);
    }

}




// 主要内容-1-标题栏
aside{
    width: 100%;
    height: 4.56rem;
    display: grid;
    grid-template-columns: repeat(5,20%);
    grid-template-rows: repeat(2,50%);
    .aside-1{
        img{
            width: 2.16rem;
            height: 2.28rem;
        }
    }
}


// 三图区



.three-pic{
    width: 100%;
    height: 7.62rem;
    display: grid;
    grid-template-columns: repeat(2,5.37rem);
    grid-template-rows: repeat(2,3.78rem);
    gap: .06rem;
    .t-pic-1{
        grid-column: 1/2;
        grid-row: 1/3;
        img{
            width: 5.37rem;
            height: 7.62rem;
        }
    }
    .t-pic-2{
        img{
            width: 5.37rem;
            height: 3.78rem;
        }
    }
}


.one-pic-1{
    img{
        margin: .06rem;
        width: 10.81rem;
        height: 6.62rem;
    }
}




// <!-- 下图区-手机 -->


.phone-1{
    width: 100%;
    height: 7.29rem;
    margin: .17rem 0rem;
    display: grid;
    justify-content: space-around;
    grid-template-columns:repeat(2,5.16rem) ;
    grid-template-rows: 100%;
    column-gap: .17rem;
    .phone-1-1{
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
       
        img{
            width: 5.16rem;
            height: 4.18rem;
            background-color: gainsboro;
        }
        h6{
            font-size: .42rem;
        }
        p{
            &:nth-child(3){
                color: black;
            }
           
            font-size: .35rem;
            color:#ee6d1c;
            span{
                position: relative;
                color: gainsboro;
                &::after{
                    width: 1.01rem;
                    height: .03rem;
                    content: '';
                    position: absolute;
                    top: .23rem;
                    left: 0;
                    background-color: gainsboro;
                }
            }
        }
        .ljgm{
            width: 3rem;
            height: .86rem;
            background-color: #ee6d1c;
            color: white;
            font-size: .4rem;
            display: flex;
            justify-content: center;
            align-items: center;
        }

    }

}


.more-1{
    width: 100%;
    height: 1.5rem;
    font-size: .4rem;
    border-top: 1px solid gainsboro;
    display: flex;
    justify-content: center;
    align-items: center;
}
.more-2{
    width: 100%;
    height: 6.88rem;
    padding-top: .29rem;
    background-color: gainsboro;
    img{
        width: 10.81rem;
        height: 6.6rem;
    }
}



.old-1{
    width: 100%;
    height: 7.2rem;
    display: grid;
    grid-template-columns: repeat(2,5.37rem);
    grid-template-rows: 100%;
    gap: .17rem;
    justify-content: space-around;
    margin-bottom: .14rem;
    div{
        img{
            width: 5.37rem;
            height: 7.2rem;
        }
    }
}
.old-3{
    img{
        width: 100%;
        height: 4.2rem;
        margin-bottom: .14rem;
    }
}



.footer-1{
    width: 100%;
    height: 1.59rem;
    background:url(../img/APP图片/footer-.png);
    background-size: 100%;
}
.kong{
    background-color: white;
    width: 100%;
    height: 1.5rem;
}
.footer-2{
    position: fixed;
    bottom: 0;
    background-color: white;
    width: 100%;
    height: 1.5rem;
    display: grid;
    grid-template-columns: repeat(5,20%);
    grid-template-rows: 100%;
    a{
        display: block;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: .35rem;
        text-decoration: none;
        img{
            width: .6rem;
            height: .6rem;
        }
        &:nth-child(1){
            color: #ff6700;
        }
    }
    &::before{
        content: '';
        position: absolute;
        width: 3.97rem;
        height: 1.09rem;
        background: url(../img/APP图片/footer-0.png);
        background-size: 100%;
        top: -1.44rem;
        left: 30%;
    }
}




















